import React, { Component } from 'react'
import UpImgLoad from '../components/UploadImg'
import '../assets/style/findNewHouse.less'
import SelectOptions from '../components/selectOptions'
import ModelType from '../components/modelType'
import Input from '../components/Input'
import Tag from '../components/Tags'
import { NavBar, Icon, NoticeBar, WhiteSpace, Toast } from 'antd-mobile';
import { connect } from 'react-redux'
import { saveHouseData } from '../redux/redux_actions'
import store from '../redux/reduers';
import ReactPayLayer from "react-pay-layer";
import axios from '../utils/http'
import http from 'axios'


const seasons = [
    [{
        label: '一室',
        value: '一室',
    },
    {
        label: '二室',
        value: '二室',
    },
    {
        label: '三室',
        value: '三室',
    }],
    [{
        label: '一厅',
        value: '一厅',
    },
    {
        label: '二厅',
        value: '二厅',
    },
    {
        label: '三厅',
        value: '三厅',
    }],
    [{
        label: '一卫',
        value: '一卫',
    },
    {
        label: '二卫',
        value: '二卫',
    },
    {
        label: '三卫',
        value: '三卫',
    }],
];
const seasons2 = [
    {
        label: '简约现代风格',
        value: '简约现代风格',
    },
    {
        label: '田园风格',
        value: '田园风格',
    },
    {
        label: '中式风格',
        value: '中式风格',
    },
    {
        label: '欧式古典风格',
        value: '欧式古典风格',
    },
    {
        label: '地中海风格',
        value: '地中海风格',
    },
    {
        label: '日式风格',
        value: '日式风格',
    },
    {
        label: '时尚混搭',
        value: '古典风格',
    },
    {
        label: '朴素风格',
        value: '朴素风格',
    },
    {
        label: '精致风格',
        value: '精致风格',
    },
    {
        label: '自然风格',
        value: '自然风格',
    },
    {
        label: '轻快风格',
        value: '轻快风格',
    },
    {
        label: '柔和风格',
        value: '柔和风格',
    },
    {
        label: '都市风格',
        value: '都市风格',
    },
    {
        label: '乡村风格',
        value: '乡村风格',
    },
];
// 、、南、东南、东、西南、北、西
const seasons1 = [
    {
        label: '南',
        value: '南',
    },
    {
        label: '东南',
        value: '东南',
    },
    {
        label: '东',
        value: '东',
    },
    {
        label: '西南',
        value: '西南',
    },
    {
        label: '北',
        value: '北',
    },
    {
        label: '西',
        value: '西',
    },
];
class findNewHouse extends Component {
    constructor(props) {
        super(props)
        this.state = {
            cols: 1,
            housevisible: false,
            houseTypedata: [
                {
                    label: '高层住宅',
                    value: '高层住宅',
                },
                {
                    label: '小高层住宅',
                    value: '小高层住宅',
                },
                {
                    label: '商铺',
                    value: '商铺',
                },
                {
                    label: '门面房',
                    value: '门面房',
                },
                {
                    label: '厂房',
                    value: '厂房',
                },
                {
                    label: '写字楼',
                    value: '写字楼',
                },
            ],
            reginvisible: false,
            regindata: [],
            pickerValue: [],
            asyncValue: [],
            visible: false,
            renovationvisible: false,
            Imgfile: [],
            village: "",
            houseType: '',
            regin: "",
            renovation: "",
            area: "",
            price: "",
            tags: [],
            title: "",
            describe: "",
            linker: "",
            infloor: "",
            numfloor: "",
            titles: "",
            acceptstatus: false,
            showstatus: false,
            player: "",
           oneStore :store.getState().reducer
        }
    }
    async componentWillMount() {
        const resdata = await http({
            url: './省市区.json',
            method: 'get',
        })
        console.log(resdata.data.Location.CountryRegion[0].State);
        let citydata = resdata.data.Location.CountryRegion[0].State
        let regindata = []
        citydata.forEach(item => {
            let obj = {}
            obj.label = item['-Name']
            obj.value = item['-Name']
            if (item.City) {
                let children = []
                item.City.forEach(element => {
                    let obj1 = {}
                    obj1.label = element['-Name']
                    obj1.value = element['-Name']
                    if (element['Region']) {
                        let children1 = []
                        if (Array.isArray(element['Region'])) {
                            element['Region'].forEach(item1 => {
                                let obj2 = {}
                                obj2.label = item1['-Name']
                                obj2.value = item1['-Name']
                                children1.push(obj2)
                            })
                            obj1.children = children1
                        } else {
                            let obj2 = {}
                            obj2.label = element['Region']['-Name']
                            obj2.value = element['Region']['-Name']
                            children1.push(obj2)
                            obj1.children = children1
                        }
                    }
                    children.push(obj1)
                });
                obj.children = children
            }
            regindata.push(obj)
        })
        this.setState({
            regindata: regindata
        })
    }
    componentDidMount() {
        let data = store.getState().houseData
        this.setState({
            ...data
        })
    }
    onOk = (v, type, visible) => {
        console.log(v);
        this.setState({
            [visible]: !this.state[visible],
            [type]: v.join(',')
        })
    }
    onFocus = (event, href, type) => {
        if (href) {
            let data = {
                Imgfile: this.state.Imgfile,
                village: this.state.village,
                houseType: this.state.houseType,
                regin: this.state.regin,
                renovation: this.state.renovation,
                area: this.state.area,
                price: this.state.price,
                tags: this.state.tags,
                describe: this.state.describe,
                linker: this.state.linker,
                infloor: this.state.infloor,
                numfloor: this.state.numfloor,
                titles: this.state.titles,
                acceptstatus: this.state.acceptstatus
            }

           
            if (!this.state.regin) {
               Toast.fail("区域不存在，请填写区域信息")
            } else {
                this.props.saveHouseData(data)
                this.props.history.push(href, {query: {
                    regin:this.state.regin
                }})
            }


        } else {
            this.setState({
                [type]: !this.state[type]
            })
        }
    }
    onBlur = (event, key) => {
        this.setState({
            [key]: event.target.value
        })
    }
    getData = (val, status) => {
        if (status) {
            this.state.tags.push(...val)
        } else {
            let index = this.state.tags.indexOf(...val)
            this.state.tags.splice(index, 1)
        }
    }
    getImg = (value) => {

        this.setState({
            Imgfile: value
        })
    }
    handlerSub = () => {
        if (!this.state.acceptstatus) {
            Toast.fail('平台协议未接受，不能发布')
            return
        }
        let data = {
            Imgfile: this.state.Imgfile,
            village: this.state.village,
            houseType: this.state.houseType,
            regin: this.state.regin,
            renovation: this.state.renovation,
            area: this.state.area,
            price: this.state.price,
            tags: this.state.tags,
            describe: this.state.describe,
            linker: this.state.linker,
            infloor: this.state.infloor,
            numfloor: this.state.numfloor,
            titles: this.state.titles,
            acceptstatus: this.state.acceptstatus
        }
        this.props.saveHouseData(data)
        this.setState({
            showstatus: true
        })

    }
    onRef = (e) => {
        this.state.player = e
    }
    handleClose = () => {
        this.setState({
            showstatus: false
        })
    }
    inputEnd = (val) => {
       
        this.state.player.success().then(async () => {
            let formdata = new FormData()
            let data = {
                village: this.state.village,
                houseType: this.state.houseType,
                regin: this.state.regin,
                renovation: this.state.renovation,
                area: this.state.area,
                price: this.state.price,
                tags: this.state.tags,
                describe: this.state.describe,
                linker: this.state.linker,
                infloor: this.state.infloor,
                numfloor: this.state.numfloor,
                titles: this.state.titles,
                acceptstatus: this.state.acceptstatus,
                user_id: this.state.oneStore.id
            }
            formdata.append('data', JSON.stringify(data))
            formdata.append('images', this.state.Imgfile[0].file)
            const resdata = await axios({
                url: '/client/addretalHouses',
                method: 'post',
                data: formdata
            })
            console.log(resdata.data);
            if (resdata.data.code === 200) {
                Toast.success(resdata.data.msg);
                this.props.history.push({
                    pathname:"/home/Yrelease"
                })
            } else {
                Toast.fail(resdata.data.msg);
            }
        });
    }
    forgetClickEvent = () => {
        console.log(222);
    }
    change = (event, key) => {
        this.setState({
            [key]: event.target.value
        })
    }
    render() {
        return (
            <div className="subscribeNewHouse">
                <NavBar
                    mode="dark"
                    icon={<Icon type="left" />}
                    onLeftClick={() => this.props.history.go(-1)}
                >有房出租</NavBar>
                <NoticeBar mode="F5DEE4" icon={<svg t="1627304024791" className="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="1970" width="20" height="20">
                    <path
                        d="M512 1024c-281.6 0-512-230.4-512-512s230.4-512 512-512 512 230.4 512 512-230.4 512-512 512z m0-938.666667c-234.666667 0-426.666667 192-426.666667 426.666667s192 426.666667 426.666667 426.666667 426.666667-192 426.666667-426.666667-192-426.666667-426.666667-426.666667z m0 725.333334c-25.6 0-42.666667-17.066667-42.666667-42.666667v-298.666667c0-25.6 17.066667-42.666667 42.666667-42.666666s42.666667 17.066667 42.666667 42.666666v298.666667c0 21.333333-17.066667 42.666667-42.666667 42.666667z m0-567.466667c25.6 0 46.933333 21.333333 46.933333 46.933333s-21.333333 46.933333-46.933333 46.933334-46.933333-21.333333-46.933333-46.933334 21.333333-46.933333 46.933333-46.933333z"
                        p-id="1971" fill="#E0898E"></path>
                </svg>}>
                    发布本条信息将收费十元。
                </NoticeBar>
                <UpImgLoad getImg={this.getImg} ImgUrl={this.state.Imgfile}  ></UpImgLoad>
                <WhiteSpace size='md' />
                <SelectOptions title="区域" {...this.props}
                    horizontal="horizontal"
                    data={this.state.regindata}
                    cols={3}
                    cascade={true}
                    value={this.state.regin}
                    onOk={(v) => this.onOk(v, 'regin', 'reginvisible')}
                    visible={this.state.reginvisible}
                    onFocus={(event) => this.onFocus(event, undefined, 'reginvisible')}
                    placeholder="请选择"
                    onDismiss={() => this.setState({
                        reginvisible: !this.state.reginvisible
                    })}
                    onClick={() => this.setState({
                        reginvisible: !this.state.reginvisible
                    })}
                ></SelectOptions>
                <SelectOptions horizontal="horizontal" placeholder="请选择小区" onClick={() => this.onFocus('_', "/searchVillage")} onFocus={(event) => this.onFocus(event, "/searchVillage")} title="小区" value={this.state.village} {...this.props} ></SelectOptions>
                <SelectOptions title="房产类型" {...this.props}
                    horizontal="horizontal"
                    className="reginstyle"
                    data={this.state.houseTypedata}
                    cols={this.state.cols}
                    value={this.state.houseType}
                    onOk={(v) => this.onOk(v, 'houseType', "housevisible")}
                    visible={this.state.housevisible}
                    onFocus={(event) => this.onFocus(event, undefined, 'housevisible')}
                    cascade={true}
                    placeholder="请选择"
                    onClick={() => this.setState({
                        housevisible: !this.state.housevisible
                    })}
                    onDismiss={() => this.setState({
                        housevisible: !this.state.housevisible
                    })}
                ></SelectOptions>
                <WhiteSpace size='sm' />
                <ModelType
                    title="户型|朝向|装修"
                    horizontal="horizontal"
                    {...this.props}
                    value={this.state.renovation}
                    onFocus={(event) => this.onFocus(event, undefined, 'renovationvisible')}
                    placeholder="请选择"
                    onOk={(v) => this.onOk(v, 'renovation', 'renovationvisible')}
                    seasons1={seasons1}
                    seasons={seasons}
                    seasons2={seasons2}
                ></ModelType>
                <div className="floor">
                    <Input type='number' start="所在楼层" value={this.state.infloor} onBlur={(event) => this.onBlur(event, 'infloor')} placeholder="请填写" end="层"></Input>
                    <Input type='number' start="共" value={this.state.numfloor} onBlur={(event) => this.onBlur(event, 'numfloor')} placeholder="请填写" end="层"></Input>
                </div>
                <WhiteSpace size='md' />
                <SelectOptions title="面积" {...this.props}
                    value={this.state.area}
                    onBlur={(event) => this.change(event, 'area')}
                    placeholder="请输入"
                    end="m²"
                    type='number'
                ></SelectOptions>
                <SelectOptions title="售价" {...this.props}
                    value={this.state.price}
                    onBlur={(event) => this.change(event, 'price')}
                    placeholder="请输入"
                    end="万元"
                    className="reginstyle"
                    type='number'
                ></SelectOptions>
                <WhiteSpace size='md' />
                <div className="tags">
                    <div className="tags_title">标签</div>
                    <div className="tags_content">
                        <Tag name="tags" value="新上房源" data={this.state.tags} getData={this.getData} ></Tag>
                        <Tag name="tags" value="小户型" data={this.state.tags} getData={this.getData} ></Tag>
                        <Tag name="tags" value="有电梯" data={this.state.tags} getData={this.getData} ></Tag>
                        <Tag name="tags" value="优质教育" data={this.state.tags} getData={this.getData}></Tag>
                    </div>
                    <div className="tags_content1">
                        <Tag name="tags" value="低总价" data={this.state.tags} getData={this.getData} style={{ margin: "2px 5px 10px" }}  ></Tag>
                        <Tag name="tags" value="满两年" data={this.state.tags} getData={this.getData} style={{ margin: "2px 5px 10px" }} ></Tag>
                        <Tag name="tags" value="满五年" data={this.state.tags} getData={this.getData} style={{ margin: "2px 5px 10px" }}  ></Tag>
                        <Tag name="tags" value="随时看房" data={this.state.tags} getData={this.getData} style={{ margin: "2px 5px 10px" }}  ></Tag>
                        <Tag name="tags" value="满五唯一" data={this.state.tags} getData={this.getData} style={{ margin: "2px 5px 10px" }}  ></Tag>
                        <Tag name="tags" value="低首付" data={this.state.tags} getData={this.getData} style={{ margin: "2px 5px 10px" }}  ></Tag>
                        <Tag name="tags" value="两室朝阳" data={this.state.tags} getData={this.getData} style={{ margin: "2px 5px 10px" }}  ></Tag>
                        <Tag name="tags" value="精装" data={this.state.tags} getData={this.getData} style={{ margin: "2px 5px 10px" }}  ></Tag>
                        <Tag name="tags" value="南北通透" data={this.state.tags} getData={this.getData} style={{ margin: "2px 5px 10px" }}  ></Tag>
                        <Tag name="tags" value="品质小区" data={this.state.tags} getData={this.getData} style={{ margin: "2px 5px 10px" }}  ></Tag>
                    </div>
                </div>
                <WhiteSpace size='md' />
                <SelectOptions title="标题" {...this.props}
                    value={this.state.titles}
                    onBlur={(event) => this.change(event, 'titles')}
                    placeholder="请输入"
                    horizontal="horizontal"

                ></SelectOptions>
                <SelectOptions title="描述" {...this.props}
                    value={this.state.describe}
                    onBlur={(event) => this.change(event, 'describe')}
                    placeholder="请输入"
                    className="reginstyle"
                    horizontal="horizontal"

                ></SelectOptions>
                <WhiteSpace size='md' />
                <SelectOptions title="联系人" {...this.props}
                    value={this.state.linker}
                    onBlur={(event) => this.change(event, 'linker')}
                    placeholder="请输入"
                    className="reginstyle"
                    horizontal="horizontal"

                ></SelectOptions>
                <WhiteSpace size='md' />
                <div className="houseBottom">
                    <div className="houseBottomTitle">
                        有效时间
                    </div>
                    <div className="timesdata">
                        <span>30天</span>
                    </div>
                    <div className="subscribe">
                        <div className="sunscribe_content">
                            <Input type="checkbox" checked={this.state.acceptstatus} className="content_input" onClick={() => this.setState({
                                acceptstatus: !this.state.acceptstatus
                            })} value={this.state.acceptstatus} ></Input>
                            已阅读并接受《宏烨找房房源信息发布规则》
                        </div>
                        <div className="btn_suscribe" onClick={this.handlerSub}>发布</div>
                    </div>
                </div>
                {
                    this.state.showstatus ? <ReactPayLayer
                        onRef={this.onRef}
                        handleClose={this.handleClose}
                        forgetClickEvent={this.forgetClickEvent}
                        inputEnd={this.inputEnd}
                    /> : null
                }
            </div>
        )
    }
}
export default connect(state => state.houseData, { saveHouseData })(findNewHouse)